import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const buttonDocs= { source: { code: `buttonGroup := component.NewButtonGroup()
buttonGroup.AddButton(
    component.NewButton("Delete",
      action.CreatePayload(octant.ActionDeleteObject, key.ToActionPayload()),
      component.WithButtonConfirmation(
        "Delete Pod",
        "Are you sure you want to delete *Pod* **pod**?",
      )))
`}}

export const buttonGroupView = {
  config: {
    buttons: [
      {
        metadata: {
          type: "button"
        },
        config: {
          name: 'Delete',
          payload: {},
          confirmation: {
            title: 'Delete Pod',
            body: 'Are you sure you want to delete *Pod* **pod**?',
          },
        }
      },
    ],
  },
  metadata: {
    type: 'buttonGroup',
  },
}

export const ButtonGroupStoryTemplate = args => ({
  template: `<app-button-group [view]= "view"></app-button-group>`,
  argTypes: argTypesView,
  props: {view: args.view},
});

<h1>Button Group component</h1>
<h2>Description</h2>

<p>A Button Group component can have buttons added imperatively using the AddButton method.</p>
<p>The Button component supports a confirmation method with a Markdown compatible message that appears in a modal.
Buttons requiring confirmation are red.</p>

<h2>Example</h2>

<Meta title="Components/Button Group" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="ButtonGroup component"
         parameters={{ docs: buttonDocs }}
         args= {{ view: buttonGroupView }}>
    { ButtonGroupStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "ButtonGroup component" />
